import React, { PureComponent } from 'react'
import Topic from './components/Topic'
import List from './components/List'
import Writer from './components/Writer'
import Recommd from './components/Recommd'
import { connect } from 'react-redux'
import { actionCreators } from './store/index'

import {
  HomeWrapper,
  HomeLeft,
  HomeRight,
  BackTop
} from './style'

class Home extends PureComponent {
  
  handlerScrollTop() {
    window.scrollTo(0, 0)
  }
  render() {
    return (
      <HomeWrapper>
        <HomeLeft>
          <img className='banner-img' src="https://img2.baidu.com/it/u=2937803703,3095540904&fm=11&fmt=auto&gp=0.jpg" alt="图片" />
          <Topic />
          <List />
        </HomeLeft>
        <HomeRight>
          <Recommd />
          <Writer />
        </HomeRight>
        {
          this.props.showScroll ?
            <BackTop onClick={this.handlerScrollTop}>
              <i className="iconfont">&#xe601;</i>
            </BackTop> 
          :
            null
        }
      </HomeWrapper>
    )
  }
  componentDidMount() {
    this.props.changeHomeData()
    this.bindEvents();
  }

  componentWillUnmount(){
    window.removeEventListener('scroll',this.props.changeScrollTopShow)
  }

  bindEvents(){
    window.addEventListener('scroll',this.props.changeScrollTopShow)
  }

}

const mapState = (state) => ({
  showScroll: state.getIn(['home', 'showScroll'])
})

const mapDispatch = (dispatch) => ({
  changeHomeData() {
    dispatch(actionCreators.getHomeInfo())
  },
  changeScrollTopShow(){
    if(document.documentElement.scrollTop > 300){
      dispatch(actionCreators.toggleTopShow(true))
    }else {
      dispatch(actionCreators.toggleTopShow(false))
    }
  }
})

export default connect(mapState, mapDispatch)(Home)